<template>
  <div class="orderReplenishment">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">订单驱动补货</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen()">新增</el-button>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="danger" @click="tableDelete('')">多选删除</el-button>
              <el-button size="small" type="danger" @click="tableConfirm('')">确认收货</el-button>
              <el-button size="small" type="danger" @click="tableExport('')">多选导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="zt">
          <el-select v-model="autoVue_table_zt"
                     placeholder="补货单状态">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              v-for="item in ORDERREPLENISHMEN.zt"
              :key="item.dictionaryid"
              :label="item.value"
              :value="item.dictionaryid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template scope="s">
            <el-button type="danger" icon="delete" size="mini" @click="tableDelete(s.row)"></el-button>
            <el-button type="danger" icon="delete" size="mini" @click="tableConfirm(s.row)"></el-button>
            <el-button type="danger" icon="delete" size="mini" @click="tableConfirm(s.row)"></el-button>
            <el-button type="info"  size="mini" @click="tableExport(s.row)">导出</el-button>
          </template>
        </el-table-column>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}生成补货单</p>
      <s-table
        :table="tableAdd" ref="tableAdd"  :multiSelect="true"  @http="tableWatch">
        <el-form-item label="地址" prop="khdz">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAdd_khdz"
                    placeholder="地址" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="lxrxm">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAdd_lxrxm"
                    placeholder="联系人" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="波次编号" prop="bcbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAdd_bcbh"
                    placeholder="波次编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="khmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAdd_khmc"
                    placeholder="客户名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="发运单号" prop="fybh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_tableAdd_fybh"
                    placeholder="发运单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
      <el-button slot="footer" type="success"  @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form () {
    return {
      gzmc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      gzzd: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      gzms: { value: '', cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'stock_zhouzhuan-FEcarWms',
    store: ['ORDERREPLENISHMEN', 'DICTIONARY_orderReplenishment'],
    data: {
      table: {
        column: [ { label: '补货编号',
          prop: 'bhbh',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '创建时间',
          prop: 'cjsj',
          minWidth: '0px',
          type: 'DateRange',
          cRemarks: '',
          search: true },
        { label: '确认时间',
          prop: 'qrsj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '创建人员',
          prop: 'cjry',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '补货单状态',
          prop: 'show_zt',
          minWidth: '0px',
          cRemarks: '0：已生成 1：已确认 2：作废',
          search: true },
        { label: '确认人员',
          prop: 'qrry',
          minWidth: '0px',
          cRemarks: '',
          search: false } ],
        url: '/wmsorderrepair/list',
        key: 'id',
        tableColumn: 5,
      },
      formDialog: __form(),
      dialog: {
        title: '',
        row: {},
        size: 'large',
        message: {},
      },
      tableAdd: {
        column: [
          { label: '创建时间',
            prop: 'cjsj',
            minWidth: '0px',
            type: 'DateRange',
            cRemarks: '',
            search: false },
          { label: 'SO编号',
            prop: 'fybh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '客户名称',
            prop: 'khmc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '联系人',
            prop: 'lxrxm',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '电话',
            prop: 'lxrdh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '地址',
            prop: 'khdz',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '单据类型',
            prop: 'show_lx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '品项数',
            prop: 'pxs',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '总数量',
            prop: 'zsl',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '计划发货时间',
            prop: 'jhfhsj',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '要求交货时间',
            prop: 'yqjhsj',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '发货状态',
            prop: 'show_fyzt',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '备注',
            prop: 'bz',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '波次编号',
            prop: 'bcbh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
        ],
        url: '/wmsshipmentorder/getShipmentOrder',
        key: 'id',
        tableColumn: 5,
      },
    },
    transition: 'slide-fade',
    methods: {
      tableExport (row) {
        let tableRef = 'table';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将导出订单驱动补货。', '确认导出？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              let option = Object.assign({}, this['autoVue_' + tableRef]);
              await this.p({
                url: '/wmsorderrepair/getOutPutList',
                method: 'get',
                responseType: 'blob',
                data: {
                  ids,
                  ...option,
                },
              });
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableConfirm (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将进行确认补货的操作', '确认补货？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmsorderrepair/confirmOrder', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableDelete (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将删除选择的数据', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              await this.post('/wmsorderrepair/delete', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      dialogInit () {
        this.tableClear('tableAdd');
      },
      dialogOpen () {
        this.dialog.visible = true;
      },
      async dialogSave () {
        let ids = [];
        if (this.tableAdd.multipleSelection.length < 1) {
          this.$alert('请至少选择1个补货', '提示');
        } else {
          this.tableAdd.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
          try {
            await this.post('/wmsorderrepair/add', {
              ids,
            });
            this.tableWatch('tableAdd');
            this.dialogInit();
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
          this.dialog.visible = false;
        }
      },
    },
    mounted: async function () {
      this.tableWatch('table');
      this.tableWatch('tableAdd');
      if (!this.DICTIONARY_orderReplenishment) {
        await this.USE('DICTIONARY_orderReplenishment');
      }
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">

</style>
